<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jq/jquery.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .add,
        .lookup {
            outline: none;
            padding: 20px;
            display: block;
            margin: 20px auto;
            font-size: 20px;

        }

        .return {
            display: block;
            margin: 10px auto;
        }

        .box {
            margin: 50px auto;
            width: 900px;
            height: 500px;
            border: 5px solid rgb(79, 143, 143);
            border-radius: 3px;
        }

        form {
            background: skyblue;
            overflow: hidden;
            /* display: none; */
        }

        form input {
            width: 30%;
            height: 30px;
            margin: 20px;
        }

        form select {
            height: 30px;
            margin: 20px 50px;
        }

        form button {

            padding: 5px 10px;
            height: 30px;

        }

        .content li {
            padding: 10px;
            list-style: none;
            display: grid;
            grid-template-columns: .7fr .7fr .2fr .2fr;
        }

        .content li .aj {
            user-select: none;
            float: left;
            border: 1px solid #000;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }

        .ajdel {
            width: 50px;
            padding: 5px;
            margin: -5px 15px;
            /* border-left: 20px; */
        }
    </style>
</head>

<body>
    <div class="btnarr">
        <button class="add">新增</button>
        <button class="lookup">查询</button>
        <button class="return">返回全列表</button>
    </div>


    <div class="box">
        <form>
            <input type="text" placeholder="请输入名字..." class="uname">
            <input type="text" placeholder="请输入年龄..." class="uage">
            <select>
                <option value="true">男</option>
                <option value="false">女</option>
            </select>
            <button class="confirm ">确认</button>
            <button class="hide">隐藏</button>
        </form>

        <ul class="content">
            <li>
                <div class="aj ajname">张三</div>
                <div class="aj ajage">18</div>
                <div class="aj ajsex">男</div>
                <button class="ajdel ">删除</button>
            </li>
        </ul>
    </div>
    <script>
        let flag;
        $('form').hide()
        // 渲染
        function render(data) {
            data.usex = data.usex == 'true' ? '男' : '女'

            let childArr =
                `
                <li>
                 <div class="aj ajname">${data.uname}</div>
                 <div class="aj ajage">${data.uage}</div>
                 <div class="aj ajsex">${(data.usex)}</div>
                 <button class="ajdel">删除</button>
               </li>
                `

            $('.content').append(childArr)
        }
        // 隐藏与现实
        $('.add').on('click', function () {
            $('form').show()
            $('form').attr('style', 'background: green;')
            flag = 0;
            if (flag == 0) {
                $(this).attr('style', 'color: red;').siblings().attr('style', 'color: #000;')
            }

        })
        $('.hide').on('click', function (e) {
            // alert(11)
            e.preventDefault();
            // $('form').attr('style', 'display: none')
            $('form').hide()
        })
        $('.lookup').on('click', function () {
            $('form').show()
            $('form').attr('style', 'background: skyblue;')
            flag = 1
            if (flag == 1) {
                $(this).attr('style', 'color: red;').siblings().attr('style', 'color: #000;')
            }
        })



        // 增
        $('.confirm').on('click', function (e) {
            if (flag != 0) return
            e.preventDefault()

            let data = {
                uname: $('.uname').val(),
                uage: $('.uage').val(),
                usex: $('select').val(),
            };
            if ((data.uage || data.uname).length == 0) return $('form').hide()

            render(data)
            data = {}
            $('.uname').val('');
            $('.uage').val('');
        })
        // 删
        $('.content').on('click', '.ajdel', function () {
            $(this).parent().remove()
        });
        // 查
        $('.confirm').on('click', function (e) {

            e.preventDefault();
            if (flag != 1) return

            let data = {
                uname: $('.uname').val(),
                uage: $('.uage').val(),
                usex: $('select').val(),
            };
            // console.log(data);
            // console.log($('.aj').text());
            // console.log($('.aj').length);
            let indexName = [];
            let indexAge = [];
            for (let i = 0; i < $('.ajname').length; i++) {
                let item = $('.ajname').eq(i);
                // console.log(item, data.uname);
                // console.log(data.uname == item.text() ? true : false);
                if (item.text() == data.uname) {
                    indexName.push(i)
                }


            }
            for (let i = 0; i < $('.ajage').length; i++) {
                let item = $('.ajage').eq(i);
                // console.log(item.text(),);
                // console.log(item.text() == data.uage ? true : false);
                if (item.text() == data.uage) {
                    indexAge.push(i)
                }
            }

            if (indexName.length == 0 || indexAge.length == 0) {
                alert('查无此人')
                $('.uname').val('');
                $('.uage').val('');
                return
            }


            let index = [];
            let leng = indexName.length >= indexAge.length ? indexAge.length : indexName.length;
            console.log(leng);

            for (let i = 0; i < leng; i++) {
                if (indexName[i] == indexAge[i]) index.push(indexName[i]);
            }
            // console.log(index);
            for (const key of index) {
                $('li').hide()
                if ($('li').index() == key) {
                    $('li').eq(key).show();
                }
            }
            $('.uname').val('');
            $('.uage').val('');

        })
        // 返回全列表

        $('.return').on('click', function () {
            $('li').show()
        })

        // 改
        //注意事件委托
        $('.content').on('dblclick', ".ajname , .ajage", function () {
            const str = this.innerHTML;
            this.innerHTML = `<input type="text">`;
            const input = this.children[0];
            input.value = str;
            input.select();
            input.onblur = function () {
                // 失去焦点 将值赋予文本
                input.parentNode.innerHTML = input.value;
            }
            input.onkeyup = function (e) {
                if (e.keyCode == 13) this.blur();
            };
        });

        // $(".ajname , .ajage").on('dblclick', function () {
        //     const str = this.innerHTML;
        //     this.innerHTML = `<input type="text">`;
        //     const input = this.children[0];
        //     input.value = str;
        //     input.select();
        //     input.onblur = function () {
        //         // 失去焦点 将值赋予文本
        //         input.parentNode.innerHTML = input.value;
        //     }
        //     input.onkeyup = function (e) {
        //         if (e.keyCode == 13) this.blur();
        //     }
        // })



        // 性别更改
        $('.content').on('dblclick', ".ajsex", function () {
            this.innerHTML = `
            <select>
                <option value="true">男</option>
                <option value="false">女</option>
            </select>
            `;
            const input = this.children[0];

            console.log(input.value);
            input.onblur = function () {
                let sex = input.value == 'true' ? '男' : '女'
                input.parentNode.innerHTML = sex;
            }
        });


            // $('.ajsex').on('dblclick', function () {
            //     this.innerHTML = `
            // <select>
            //     <option value="true">男</option>
            //     <option value="false">女</option>
            // </select>
            // `;
            //     const input = this.children[0];

            //     console.log(input.value);
            //     input.onblur = function () {
            //         let sex = input.value == 'true' ? '男' : '女'
            //         input.parentNode.innerHTML = sex;
            //     }
            // })
    </script>

</body>

</html>